<template>
	<div class="container">
		<div class="jx-return-container">
      <i class="iconfont icon-back" @click="back"></i><span class="cube-title">{{boo.id ? '编辑权限' : '新建权限'}}</span>
    </div>
    <el-form ref="form" :model="params_list" :rules="rules" label-width="100px" class="jx-form">
      <div class="jx-detail">
        <div class="detail-item" style="margin-bottom: 35px;">
          <div class="item_2">
            <el-form-item label="权限名称：" prop="permission">
              <el-input v-model="params_list.permission" placeholder="请输入权限名称"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="title" style="margin-left: 10px;">设置权限</div>
        <div class="detail-item">
          <div class="item">
            <div class="jx-table" style="padding: 0;">
              <el-checkbox-group v-model="params_list.menuList" @change="getLogistics">
                <el-table :data="detail" border style="width: 100%" v-loading="boo.loading"> 
                  <el-table-column prop="title" label="目录" width="90" align="center" fixed>
                  </el-table-column>
                  <el-table-column prop="childname" label="菜单" align="center">
                    <template slot-scope="scope">
                      <div class="subsidy-con">
                        <el-checkbox :label="scope.row.id">{{scope.row.childname}}</el-checkbox>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="其他权限" width="300" align="left">
                    <template slot-scope="scope">
                      <div v-if="scope.row.group != ''" class="authority-item">
                        <div class="item">控制权限：{{scope.row.group}}</div>
                        <div class="item">地区权限：{{scope.row.address}}</div>
                      </div>
                      <div class="item" v-else>
                        <el-button type="text" @click="setAuthority">设置</el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div> 
    </el-form>
    <div class="btn-container">
      <el-button class="jx-btn" type="warning" @click="boo.showDialog = false">取消</el-button>
      <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow('form')">确定</el-button>
    </div>
    <!-- 设置其他权限 -->
    <el-dialog  :visible.sync="boo.showDetail" class="jx-dialog" width="65%">
      <div slot="title" class="header-title">
        <span class="title-name">设置其他权限</span>
      </div>
      <el-form ref="form_other" :model="currentRow" :rules="otherRules" label-width="130px" class="jx-form">
        <div class="jx-detail">
          <div class="detail-item">
            <div class="item">
              <el-form-item label="控制权限：" prop="group">
                <el-checkbox-group v-model="currentRow.group">
                  <el-checkbox label="1">新增</el-checkbox>
                  <el-checkbox label="2">删除</el-checkbox>
                  <el-checkbox label="3">导出</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="地区权限：" prop="address">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全国</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="currentRow.address" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </div>
          </div>
        </div> 
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="warning" @click="boo.showDetail = false">取消</el-button>
        <el-button class="jx-btn" type="primary" :loading="boo.saveOthering" @click="submitRow_other('form_other')">确定</el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
  import PCMenu from 'static/json/permit/menu.json'
  const cityOptions = ['上海', '北京', '广州', '深圳'];
	export default {
		data() {
			return {
        boo: {
          loading: false,
          saveing: false,
          id: this.$route.query.id,
          showDetail: false,
          saveOthering: false,
        },
        params_list: {
          permission: '',
          menuList: [],
        },
        detail: PCMenu,
        checkAll: false,
        cities: cityOptions,
        isIndeterminate: true,
        currentRow: {group: [],address: []},
        rules: {
          permission: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
        },
        otherRules: {

        }
			}
		},
		mounted(){
      let _self = this
    },
		methods: {
      back(){
        history.go(-1)
      },
      getLogistics(){
        let _self = this
        console.log(_self.params_list.menuList)
      },
      getCheck(){
        let _self = this
        // console.log(_self.params_list.checkList)
      },
      // 设置权限
      setAuthority(){
        let _self = this
        _self.boo.showDetail = true
        _self.currentRow = {group: [],address: []}
      },
      handleCheckAllChange(val) {
        let _self = this
        _self.currentRow.address = val ? cities : [];
        _self.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let _self = this
        let checkedCount = value.length;
        _self.checkAll = checkedCount === _self.cities.length;
        _self.isIndeterminate = checkedCount > 0 && checkedCount < _self.cities.length;
      },
      submitRow_other(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){  
            
					}else{
						return false
					}
				})
      },
      submitRow(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){  
            if(_self.params_list.menuList.length == 0) return _self.$message.error('请选择菜单权限')
            // _self.boo.saveing = true
            // let params = {
            //   name: _self.currentRow.name,
            // }    
            // let success = (res)=>{
            //   res = res.data
            //   if(res.status == 200){
            //     _self.getList()
            //   }else{
            //     _self.$message.error(res.message)
            //   }
            //   _self.boo.saveing = false
            //   _self.boo.showDialog = false
            // }
            // _self.$axios.post(_self.https.checked, params, success)   
					}else{
						return false
					}
				})
      }
    }
	}

</script>
<style scoped lang="sass">
  .jx-table
    /deep/ .el-table__body td
      .cell
        height: auto
        line-height: auto
    /deep/ .el-checkbox-group
      display: flex
      flex-wrap: wrap
</style>
